﻿<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="../js/json/json2.js"></script>
<script type="text/javascript" src="../js/swfobject.js"></script>

<script type="text/javascript">

function ofc_ready()
{
	alert('ofc_ready');
	//load();
}

function open_flash_chart_data()
{
    alert( 'reading data' );
    return JSON.stringify(chart);
}

function load_1()
{
	tmp = findSWF("my_chart");
	x = tmp.load( JSON.stringify(chart) );
}

function load_2()
{
	tmp = findSWF("my_chart");
	x = tmp.load( JSON.stringify(chart2) );
}

function findSWF(movieName) {
  if (navigator.appName.indexOf("Microsoft")!= -1) {
    return window[movieName];
  } else {
    return document[movieName];
  }
}

var chart = {
  "title":{
    "text":  "Many data lines",
    "style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"
  },
 
  "y_legend":{
    "text": "Open Flash Chart",
    "style": "{color: #736AFF; font-size: 12px;}"
  },
 
  "elements":[
    {
      "type":      "bar",
      "alpha":     0.5,
      "colour":    "#9933CC",
      "text":      "Page views",
      "font-size": 10,
      "values" :   [9,6,7,9,5,7,6,9,7]
    },
    {
      "type":      "bar",
      "alpha":     0.5,
      "colour":    "#CC9933",
      "text":      "Page views 2",
      "font-size": 10,
      "values" :   [6,7,9,5,7,6,9,7,3]
    }
  ],
 
  "x_axis":{
    "stroke":1,
    "tick_height":10,
    "colour":"#d000d0",
    "grid_colour":"#00ff00",
    "labels": ["January","February","March","April","May","June","July","August","Spetember"]
   },
 
  "y_axis":{
    "stroke":      4,
    "tick_length": 3,
    "colour":      "#d000d0",
    "grid_colour": "#00ff00",
    "offset":      0,
    "max":         20
  }
};
 
 
var chart2 = {
  "title":{
    "text":  "Sketch",
    "style": "{font-size:35px; color: #567300}"
  },

  "elements":[
    {
      "type":            "bar_sketch",
      "colour":          "#81AC00",
      "outline-colour":  "#567300",
      "text":            "Sketch",
      "font-size":       10,
      "offset":          6,
      "values" :   [
        3,
        8,
       -5,
        {"top":5,"outline-colour": "#7030A0", "tip": "outline"},
       4,
       {"top":5, "colour": "#99FF00", "tip": "colour"},
       {"top":-3,"colour": "#99FF00", "outline-colour": "#7030A0", "tip": "colour + outline"},
       2,
       7.5]
    }
  ],

  "x_axis":{
    "labels": ["January","February","March","April","May","June","July","August","Spetember"]
   },

  "y_axis":{
    "min": -10,
    "max":  10
  },

  "tooltip":{
    "text": "My Tip<br>#top#,#bottom# = #val#"
  }

};

alert( chart );
</script>

</head>
<body>
    
<div id="my_chart"></div>
 	
<script type="text/javascript">
swfobject.embedSWF("../open-flash-chart/open-flash-chart.swf", "my_chart", "450", "300", "9.0.0");
</script>


	
<div>
<INPUT TYPE=BUTTON OnClick="load_1();" VALUE="Chart 1">
<INPUT TYPE=BUTTON OnClick="load_2();" VALUE="Chart 2">
	</div>

</body>
</html>